<template>
    <div class="goods_list_page">
        <van-nav-bar
            :title="listType==0?'全部课程':listType==1?'VIP课程':listType==2?'公益课堂':''"
            left-text="返回" 
            left-arrow
            @click-left="onClickLeft"  
        /> 
        <load-more 
            :pageIndex="pageIndex" 
            :pageSize="pageSize" 
            :totalCount="totalCount" 
            :openRefresh="true"
            @refresh="refresh"
            @loadmore="loadmore"> 
            <prd-list :prdList="goodsList" v-if="goodsList.length>0"></prd-list>   
        </load-more>  
        <van-divider dashed v-if="goodsList.length==0" style="margin-top:10px;">暂无数据</van-divider>
    </div>
</template>

<script>
import * as api from './../../api/api'
export default {
    data(){
        return{  
            listType:0, //0 所有，1 vip(推荐课程)，2 公益课堂，
            pageIndex: 1,
            pageSize: 10,
            totalCount: 0,
            is_loadding:false,
            goodsList:[], 
        }
    },
    watch:{
        '$route'(to,from){   
            if(to.path=='/goodsList'){
                this.initData();
            }
        }
    },
    mounted(){ 
        this.initData();
    },
    methods:{ 
        initData(){
            this.pageIndex=1;
            this.pageSize=10;
            this.totalCount=0;
            this.is_loadding=false;
            this.goodsList=[];
            this.listType=this.$route.query.listType; 
            console.log(this.listType);
            if(this.$route.query.listType==undefined){
                this.$notify({ type: 'danger', message: '参数错误' });
                this.$router.go(-1);
            }else{
                this.getGoodsData();
                this.goodsList=[];
            } 
        },
        onClickLeft(){
            this.$router.go(-1);
        },
        getGoodsData(){
            let vm = this;
            vm.is_loadding = true; 
            if(this.listType==0){
                api.fetchSubjectList({page:vm.pageIndex}).then(res=>{
                    vm.is_loadding = false; 
                    if(res.data.code==200&&res.data.data){  
                        vm.resChangeFun(res.data.data)
                    }
                }).catch(err=>{
                    vm.is_loadding = false;
                })
            }else  if(this.listType==1){
                api.fetchVipList({page:vm.pageIndex}).then(res=>{
                    vm.is_loadding = false; 
                    if(res.data.code==200&&res.data.data){  
                        vm.resChangeFun(res.data.data)
                    }
                }).catch(err=>{
                    vm.is_loadding = false;
                })
            }else  if(this.listType==2){
                api.fetchSubjectFreeList({page:vm.pageIndex}).then(res=>{
                    vm.is_loadding = false; 
                    if(res.data.code==200&&res.data.data){  
                        vm.resChangeFun(res.data.data)
                    }
                }).catch(err=>{
                    vm.is_loadding = false;
                })
            }
        },  
        resChangeFun(resData){
            let vm = this;
            if(vm.pageIndex==1){   
                vm.goodsList=resData?resData:[];
                resData.length<10?vm.totalCount=0:vm.totalCount=100;
            }else{
                if(resData.length>0){   
                    vm.goodsList=vm.goodsList.concat(resData);;  
                    vm.totalCount+=10;  
                }else{
                    vm.totalCount=0;
                } 
            } 
        },
        loadmore(pageIndex){  
            // console.log('加载更多中...')
            if(!this.is_loadding){
                this.pageIndex = pageIndex;
                this.getGoodsData(); 
            }  
        },
        refresh(){
            this.pageIndex = 1;
            this.getGoodsData(); 
            // console.log('您下拉刷新了')
        },
    }, 
    components:{ 

    }

}
</script>


<style scoped lang="scss">
.goods_list_page{
    // padding-top:54px; 
    padding-bottom:54px; 
    height:auto; 
    min-height: 100%;
    background:#fff;
     
}

</style>
